<template>
  <div class="b-dot-button cursor-pointer inline-flex justify-center items-center"
       v-bind="$attrs"
       v-on="$listeners">
    <slot>
      <i :class="['z-button--icon',icon]"
         v-if="icon"></i>
      <span>{{name}}</span>
    </slot>
  </div>
</template>

<script>
export default {
  name: 'BDotButton',
  props: {
    name: String,
    icon: {
      type: String,
      default: 'el-icon-plus'
    }
  }
}
</script>

<style lang="scss" scoped>
.b-dot-button {
  height: 28px;
  border: 1px dashed #17b3a3;
  font-size: 14px;
  color: #17b3a3;
  margin-right: 10px;
  padding: 0 10px;
  flex-shrink: 0;
  &--icon {
    font-size: 14px;
    margin-right: 8px;
  }

}
</style>
